<link rel="stylesheet" type="text/css" href="/static/plugins/webupload/webuploader.css">
<link rel="stylesheet" type="text/css" href="/static/plugins/webupload/style.css">
<style>
    .close-upimg{position: relative;bottom: 0px;width: 170px;height: 30px;background: rgba(0,0,0,.5);text-align: center;line-height: 30px;color: white;font-size: 16px;font-weight: bold;cursor:pointer;display: none;}
    .oneImg:hover .close-upimg{display: block;position: relative;bottom: 30px;}
</style>
<div class="box-content">
    <form class="form-horizontal bv-form"  role="form"  id="addForm">
        <div class="form-group">
            <label class="col-sm-3 control-label">添加图片</label>
            <div class="input-group col-sm-7">
                <input type="hidden" id="data_photo" name="photo" >
                <div class="input-group col-sm-12 images" style="border:2px dashed #DEDEDE;">
                    <img id="img_data" height="100px"  src="/static/img/no_img.jpg"/>
                </div>
                <div id="fileList" class="uploader-list" style="float:left"></div>
                <div id="imgPicker" style="margin-top:20px;float:right">选择图片</div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="/static/plugins/webupload/webuploader.min.js"></script>
<script>
    /*******************************多图上传***********************************/
    var $list = $('#fileList');
    var imgArr = [];//存储上传路径
    var uploader = WebUploader.create({
        //配置压缩的图片的选项 false不压缩
        compress: {
            // width: 1600,
            // height: 1600,
            // quality: 90,// 图片质量，只有type为`image/jpeg`的时候才有效。
            // allowMagnify: false,// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            // crop: false,// 是否允许裁剪。
            // preserveHeaders: true,// 是否保留头部meta信息。
            // noCompressIfLarger: false,// 如果发现压缩后文件大小比原来还大，则使用原来图片 // 此属性可能会影响图片自动纠正功能
            compressSize : 2097152,//单位字节，如果图片大小小于此值，不会采用压缩
        },
        //配置生成缩略图的选项。
        // thumb:{
        //     width: 110,
        //     height: 110,
        //     quality: 70, // 图片质量，只有type为`image/jpeg`的时候才有效。
        //     allowMagnify: true,// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
        //     crop: true, // 是否允许裁剪。
        //     type: 'image/jpeg'// 为空的话则保留原有图片格式// 否则强制转换成指定的类型。
        // },
        auto: true,// 选完文件后，是否自动上传。
        swf: '/static/plugins/webupload/Uploader.swf',// swf文件路径
        server: "{:url('dashboard/upload')}",// 文件接收服务端。
        duplicate :true,// 重复上传图片，true为可重复false为不可重复
        pick: {
            id: '#imgPicker',// 选择文件的按钮
            multiple: true,//true多图上传 false单图上传
            label:'选择图片'
        },
        // chunked: true,  // 分片上传大文件
        // chunkRetry: 10, // 如果某个分片由于网络问题出错，允许自动重传多少次？
        // thread: 100,// 最大上传并发数
        // method: 'POST',
        fileNumLimit: 3, //限制上传个数
        fileSingleSizeLimit: 10*1024*1024, //限制上传单张图片文件大小，单位是B，1M=1024000B
        // fileSizeLimit: 20* 1024 * 1024,// 总上传限制大小
        // 只允许选择图片文件。
        accept: {
            title: 'Images',//文字描述
            extensions: 'jpg,jpeg,bmp,png',//允许的文件后缀
            mimeTypes: 'image/jpg,image/jpeg,image/png,image/bmp'//允许的文件后缀
        },

        'onUploadSuccess': function(file,data,response) {
            // console.log(uploader.getStats().successNum);
            $('#img_data').hide();
            //存放图片的父元素
            var $fa = $("<div class='oneImg' style='width:170px;height:100px;float:left;margin-left:10px;margin-top:10px;margin-bottom:10px;'></div>");
            $fa.appendTo($('.images'));
            //展示图片元素
            var $show = $("<img width='170px' height='100px' id='" + file.id + "' src='static/uploads/images/" + data._raw+"' title='"+file.name+"' alt='"+file.name+"' onclick='imgDisplay(this)' style='cursor:pointer' />");
            $show.appendTo($fa);
            var $img0 = $('<p class="close-upimg" onclick="imgDel(this)"></p>');//删除按钮
            $img0.html('删 除').appendTo($fa);
            imgArr.push(data._raw);//返回的图片地址存入imgArr
            $("#data_photo").val(imgArr);
        }
    });

    //错误信息提示
    uploader.on('error', function (code) {
        var err = '';
        switch (code) {
            case 'F_EXCEED_SIZE':
                err += '单张图片大小不得超过' +  uploader.options.fileSingleSizeLimit/1024/1024 + 'MB！';
                break;
            case 'Q_EXCEED_NUM_LIMIT':
                err += '最多只能上传' +  uploader.options.fileNumLimit + '张！';
                break;
            case 'Q_EXCEED_SIZE_LIMIT':
                err += '上传图片总大小超出'+ uploader.options.fileSizeLimit/1024/1024 +'MB！';
                break;
            case 'Q_TYPE_DENIED':
                err += '无效图片类型，请上传正确的图片格式！';
                break;
            default:
                err += '上传错误，请刷新！';
                break;
        }
        layer.msg('系統提示'+ err,{icon:2,shade:0.1,time:2000});
        return false;
    });

    /**
     * imgDel 删除预览图
     * @param obj
     */
    function imgDel(obj){
        var src = $(obj).prev().attr('src');
        var id = $(obj).prev().attr("id");
        $.ajax({
            url:"{:url('dashboard/deleteImg')}",
            type:'post',
            dataType:'json',
            data:'add='+src,
            success:function(res){
                if(res.code == 200){
                    //删除imgArr中的元素
                    for(var i=0; i<imgArr.length; i++) {
                        if('static/uploads/images/'+imgArr[i] == src) {
                            imgArr.splice(i,1);
                            break;
                        }
                    }
                    $("#data_photo").val(imgArr);
                    var numUp = $('.images').find(".oneImg").length;
                    if(numUp == 1){
                        $('#img_data').show();
                        // $('#message').remove();//提示信息删除
                        uploader.reset();//重置队列
                    }
                    if(numUp <= uploader.options.fileNumLimit){
                        $('#imgPicker').show();
                    }
                    $(obj).parent().remove();//移除预览图
                    uploader.removeFile(id,true);//删除队列的文件
                }
            }
        })
    }

    // //上传事件前
    // uploader.on( 'fileQueued', function( file ) {
    //     $list.html( '<div id="message">正在上传...</div>');
    // });

    // 文件上传成功
    uploader.on( 'uploadSuccess', function( file ) {
        // $list.html( '<div id="message"><span id="num">'+uploader.getStats().successNum+'</span>个成功 '+uploader.getStats().uploadFailNum+'个失败</div>');
        if(parseInt($('.images').find(".oneImg").length)+1 == uploader.options.fileNumLimit){
            $('#imgPicker').hide();
        }
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        uploader.removeFile(file.id,true);//删除队列的文件
        // console.log(file);
        // $('.yanse').css("color","#ED5666");
        // $("#myPhoto").css("display","");
        // $("#myPhoto").html("<i class='fa fa-times-circle'></i> 请上传一张图片");
        // $( '#'+file.id ).find('p.state').text('上传出错!');
    });

    /*******************************多图上传***********************************/
</script>
